import NavBar from '../../../components/NavBar'
// import { DatePicker, List,Drawer } from 'antd-mobile'
import { List, Toast, Modal } from 'antd-mobile'
import { useHistory } from 'react-router-dom'
import styles from './index.module.scss'
import { useEffect } from 'react'
import { useDispatch, useSelector } from 'react-redux'
import { getProfile } from '../../../store/action/profile'
import classNames from 'classnames'
import { logout2 } from '../../../store/action/login'
const ProfileEdit = () => {
  const history = useHistory()
  const dispatch = useDispatch()
  useEffect(() => {
    dispatch(getProfile())
  }, [dispatch])
  const logout = async () => {
    // 显示弹窗
    // 删除token（包括redux和本地）
    // 跳转到登录页
    const result = await Modal.confirm({
      content: '你确定要退出吗',
    })
    if (result) {
      console.log('hahah ')
      dispatch(logout2())
      // 跳转到登录页
      history.push('/login')
      Toast.show({ content: '退出成功', position: 'bottom' })
    } else {
      Toast.show({ content: '点击了取消', position: 'bottom' })
    }
  }
  // 获取redux中的profile数据
  const profile = useSelector((state) => state.profile.profile)
  // console.log(profile)
  return (
    <div className={styles.root}>
      <div className="content">
        {/* 顶部导航栏 */}
        <NavBar onLeftClick={() => history.go(-1)}>个人信息</NavBar>

        <div className="wrapper">
          {/* 列表一：显示头像、昵称、简介 */}
          <List className="profile-list">
            <List.Item
              onClick={() => {}}
              extra={
                <span className="avatar-wrapper">
                  {/* <img src={profile.photo} alt="" /> */}
                </span>
              }
            >
              头像
            </List.Item>

            <List.Item onClick={() => {}} extra={profile.name}>
              昵称
            </List.Item>

            <List.Item
              onClick={() => {}}
              extra={
                <span
                  className={classNames('intro', profile.intro ? 'normal' : '')}
                >
                  {profile.intro || '未填写'}
                </span>
              }
            >
              简介
            </List.Item>
          </List>

          {/* 列表二：显示性别、生日 */}
          <List className="profile-list">
            <List.Item
              onClick={() => {}}
              extra={profile.gender === 1 ? '女' : '男'}
            >
              性别
            </List.Item>
            {/* <DatePicker
              mode="date"
              title="选择年月日"
              value={new Date()}
              minDate={new Date(1900, 1, 1, 0, 0, 0)}
              maxDate={new Date()}
              onChange={() => { }}
            >
              <List.Item arrow="horizontal" extra={'2020-02-02'}>生日</List.Item>
            </DatePicker> */}
          </List>

          {/* 文件选择框，用于头像图片的上传 */}
          {/* <input type="file" hidden /> */}
        </div>

        {/* 底部栏：退出登录按钮 */}
      </div>
      <div className="logout" onClick={logout}>
        <button className="btn">退出登录</button>
      </div>
      {/* <Drawer></Drawer>无了 */}
    </div>
  )
}

export default ProfileEdit
